*{
  margin: 0;
  padding: 0;
}

ul,li{
  list-style:none;
}
a{
  text-decoration: none;
}
body{
  font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
}

//去掉ie 浏览器下input框的默认样式
::-ms-clear,::-ms-reveal{
  display:none;
}
.use{
  width: 100%;
  min-width: 1000px;
  .checktoast{
    cursor: pointer;
    display: none;
    opacity: 0;
    position: fixed;
    top: 14%;
    left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
    width:392px;
    height:30px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    background-color:#F6B37F;
    border-radius: 3px;
    box-shadow:1px 1px 1px 1px rgba(0,0,0,0.22);
    z-index: 100000;
    .close{
      position: absolute;
      top: 0;
      left: 374px;
    }
  }
  .use__title{
    width: 100%;
    height: 76px;
    padding: 22px 0 0 0;
    background-size: 100% 76px;
    background: url("../../assets/image/usetitleback.png") no-repeat top center;
    h2{
      padding-left: 71px;
      width: 211px;
      height: 36px;
      background: url("../../assets/image/usetitle.png") no-repeat top center;
    }
  }
  .use__content{
    width: 100%;
    .content__title{
      width:100%;
      text-align: center;
      height:21px;
      font-size:22px;
      margin: auto;
      color:rgba(95,95,95,1);
      line-height:24px;
      padding: 39px 0 15px 0;
    }
    .content__phototitle{
      width: 124px;
      height: 12px;
      margin: 0 auto;
      background: url('../../assets/image/phototitle.png') no-repeat top center;
    }
    .content__container{
      width: 550px;
      min-width: 550px;
      margin: 0 auto;
      padding-bottom: 100px;
      .container__company{
        .company__header{
          position: relative;
          width:100px;
          height:14px;
          font-size:14px;
          color:rgba(84,84,84,1);
          line-height:24px;
          margin-bottom: 30px;
          &:after{
            content: '';
            width:466px;
            height:1px;
            background:#D2D2D2;
            display: inline-block;
            position: absolute;
            top: 26px;
            left: 12px;
          }
          span{
            width:2px;
            height:10px;
            margin-right: 6px;
            background-color:#04A2FF;
            display: inline-block;
            font-weight: bold;
          }
        }
        .company__content{
          padding-left: 42px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          div{
            position: relative;
            color: #545454;
            margin-bottom: 16px;
            span{
              color: red;
              height:11px;
              font-size:14px;
              display: inline-block;
              &.comname{
                position: absolute;
                top: 5px;
                left: 14px;
                font-size: 14px;
                color: #545454;
                margin-right: 0;
              }
              .comnamespan{
                position: absolute;
                top: 5px;
                left: 1px;
              }
              &.address{
                top: 6px;
                left: 14px;
                position: absolute;
                color: #545454;
                height:11px;
              }

            }
            .inputlist{
              position: absolute;
              background-color: #fff;
              border: 1px solid rgba(210, 210, 210, 1);
              border-top: none;
              width: 290px;
              top: 34px;
              left: 92px;
              display: none;
              z-index: 10000;
              li{
                height: 20px;
                line-height: 20px;
                color: initial;
                font: 400 13.3333px Arial;
                padding: 2px 0 2px 10px;
                &:hover{
                  background-color: #D2D2D2;
                }
              }
            }
            .noemptytoast{
              position: absolute;
              display: none;
              top: 8px;
              left: 390px;
              color: red;
              height:12px;
              font-size: 12px !important;
              color:rgba(230,0,0,1);
            }
            .noemptytoast__position{
              left: 407px;
            }
            input[type="text"]{
              outline: none;
              //outline:medium;
              width:292px;
              height:34px;
              margin-left: 81px;
              padding-left: 10px;
              border: 1px solid rgba(210, 210, 210, 1);
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              background-color: #fff;
            }
            &:nth-child(2){
              position: relative;
              .arrow-box{
                width:30px;
                height:30px;
                margin:20px auto;
                top: -7px;
                left: 365px;
                position:absolute;
                .bottom{
                  width:20px;
                  height:20px;
                  position:absolute;
                  left:0;
                  top:0;
                  z-index: 1000;
                }
                .bottom-arrow1,.bottom-arrow2{
                  width:0;
                  height:0;
                  display:block;
                  position:absolute;
                  left:0;
                  top:0;
                  z-index: 5;/*兼容ie8-*/
                  border-bottom:7px transparent dashed;
                  border-left:7px transparent dashed;
                  border-right:7px transparent dashed;
                  border-top:7px white solid;
                  overflow:hidden;
                }
                .bottom-arrow1{
                  top:1px;
                  border-top:7px #D2D2D2 solid;
                }
                .bottom-arrow2{
                  border-top:7px white solid;
                }
              }
              #addr-choice{
                margin-bottom: 20px;
              }
              #title-wrap li,#addr-wrap li{
                list-style: none;
                display: inline-block;
                text-align: center;
                cursor: pointer;
              }

              #title-wrap li{
                width:115px;
                height: 35px;
                line-height: 35px;
                margin-bottom: 10px;
                background-color: #D2D2D2;
              }

              .titleSel{
                background-color: #fff !important;
              }

              #addr-wrap li{
                float: left;
                width: 83px;
                height: 30px;
                border-radius: 4px;
                line-height: 30px;
                font-size: 14px;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
              }
              #addr-wrap li:hover{
                background-color: #23B7E5;
              }
            }
            &:nth-child(3){
              padding-left: 14px;
              p{
                display: inline-block;
                padding-top: 6px;
                font-size: 14px;
              }
              .textbox{
                vertical-align: top;
                width: 292px;
                height: 65px;
                text-indent:10px;
                padding-top: 4px;
                margin-left: 18px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                list-style: none;
                outline:none;
                resize:none;
                overflow:hidden;
                color: initial;
                font: 400 13.3333px Arial;
                border: 1px solid RGBA(210, 210, 210, 1);
              }
            }
            #city{
              display: none;
              width: 345px;
              top: 38px;
              left: 92px;
              font-size: 12px;
              background-color: #fff;
              position: absolute;
              border: 1px solid #D2D2D2;
              z-index: 1;
            }
          }
        }
      }
      .container__personal{
        margin-bottom: 53px;
        .personal__header{
          position: relative;
          width:130px;
          height:14px;
          font-size:14px;
          color:rgba(84,84,84,1);
          line-height:24px;
          &:after{
            content: '';
            width:466px;
            height:1px;
            background:#D2D2D2;
            display: inline-block;
            position: absolute;
            top: 26px;
            left: 12px;
          }
          span{
            width:2px;
            height:10px;
            margin-right: 6px;
            background-color:#04A2FF;
            display: inline-block;
            font-weight: bold;
          }
        }
        .personal__content{
          padding-top:45px;
          padding-left: 59px;
          li{
            color:rgba(84,84,84,1);
            margin-bottom: 17px;
            position: relative;
            padding-left: 9px;
            font-size:14px;
            .phonetoast,.mailtoast,.noemptytoast,.empphonetoast,.empmailtoast,.trueyeml{
              position: absolute;
              display: none;
              top: 8px;
              left: 246px;
              color: red;
              height:12px;
              font-size: 12px;
              color:rgba(230,0,0,1);
            }
            .mail__position,.noemptytoast__position,.empmail__position{
              left: 375px;
            }
            .trueyeml__block{
              display: block;
              top: 43px;
              left: 57px;
              color: rgb(230, 128, 32);
              font-size: 12px;
            }
            span{
              position: absolute;
              color: red;
              top: 10px;
              left: -3px;
              height:14px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              display: inline-block;
            }

            input[type="text"]{
              outline: none;
              //outline:medium;
              margin-left: 18px;
              width:292px;
              height:34px;
              border: 1px solid #D2D2D2;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              padding-left: 10px;
              input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
                background-color: #ffffff!important;
                background-image: none;
                color: rgb(0, 0, 0);
                list-style: none;
                outline:none;
                resize:none;
              }

            }
            &:nth-child(1),&:nth-child(3){
              margin-left: 16px;
            }
            &:nth-child(2){
              input[type="text"]{
                outline: none;
                //outline:medium;
                margin-left: 20px;
                width: 146px;
                padding-left: 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
              }
            }
          }
        }
      }
      .container__checkbox{
        height:12px;
        font-size:12px;
        color:rgba(95,95,95,1);
        padding-left: 139px;
        input[type="checkbox"]{
          width:16px;
          height:16px;
          border-radius: 3px;
          float: left;
          margin-right: 11px;
        }
        .checkbox__right{
          float: left;
          .server,.useprotocol{
            color: #0505ff;
            cursor: pointer;
          }
        }
      }
    }
    .container__btngrounp{
        padding-top: 25px;
        padding-left: 139px;
        div{
        cursor: pointer;
        width:83px;
        height:32px;
        font-size:14px;
        color:rgba(255,255,255,1);
        border-radius: 3px;
        line-height:32px;
        background-color: #03B7FF;
        text-align: center;
        display: inline-block;
        margin-right: 26px;
         transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
         -webkit-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
          &:nth-child(2){
            background-color: #E1E1E1;
            margin-right: 0;
            color: #545454;
            &:hover{
              color: #fff;
            }
          }
          &:hover{
            background-color: #0486D9;
            transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
          }
      };
    }
  }
  .protocol__content,.useprotocol__content{
      position: fixed;
      opacity: 0;
      display: none;
      top: 30px;
      left: 50%;
    z-index: 100000;
      -webkit-transform: translate(-50%);
      -moz-transform: translate(-50%);
      -ms-transform: translate(-50%);
      -o-transform: translate(-50%);
      transform: translate(-50%);
      width:602px;
      height:600px;
      margin: 0 auto;
      background:rgba(255,255,255,1);
      padding: 29px 61px 120px 59px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      box-shadow:1px 1px 1px 1px rgba(0,0,0,0.22);
      &:after{
        content: '';
        position: absolute;
        top: 63px;
        left: 58px;
        width:485px;
        height:1px;
        background:#E5E5E5;
      }
      h4{
        position: relative;
        margin: 0 auto;
        text-align: center;
        height:16px;
        margin-bottom: 42px;
        background:rgba(255,255,255,1);
      }
      p{
        width:485px;
        height:440px;
        font-size:12px;
        color:rgba(0,0,0,1);
        line-height:24px;
      }
      .scroll{
        height:400px;
        overflow-y: scroll;
        margin-bottom: 47px;
      }
      .scroll::-webkit-scrollbar{
        width:4px;
        height:4px;
      }
      .scroll::-webkit-scrollbar-track{
        background: #f6f6f6;
        border-radius:2px;
      }
      .scroll::-webkit-scrollbar-thumb{
        background: #aaa;
        border-radius:2px;
      }
      .scroll::-webkit-scrollbar-thumb:hover{
        background: #747474;
      }
      .scroll::-webkit-scrollbar-corner{
        background: #f6f6f6;
      }
    .xyclose{
      cursor: pointer;
      display: inline-block;
      width:83px;
      height:32px;
      background:#26D8FE;
      color: #fff;
      text-align: center;
      line-height: 32px;
      border-radius: 3px;
      margin-left: 197px;
      transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      &:hover{
        background-color: #0486D9;
        transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
      }
    }
    }
}